<?php
use app\assets\ApiAsset;
use app\assets\LayerAsset;
use app\assets\TableAsset;
use app\assets\EchartsAsset;
use app\models\KeyMap;
use app\models\UserCardRecharge;
use app\widgets\ManagerTableOp; 
use yii\helpers\Html;
use yii\helpers\Url;
use dosamigos\datepicker\DatePicker;


EchartsAsset::register($this);

$this->title = '数据用量分析';
$this->params['breadcrumbs'][] = '系统统计';
$this->params['breadcrumbs'][] = $this->title;
?>
<?php echo Html::beginForm('?', 'get', ['class'=>'form-inline']);?>

<div class="form-group">
    <label for="search_agentname" class="sr-only">代理商</label>
    <?php echo Html::textInput('search_agentname', Yii::$app->request->get('search_agentname'), ['id' => 'search_agentname', 'class' => 'form-control', 'placeholder' => '代理商', 'style' => 'width: 120px;']);?>
</div>
<!-- <div class="form-group">
	<label for="time">月份</label>
	<input type="text" id="month" name="search_month">	

</div> -->
<div class="form-group">
    <button class="btn btn-primary btn-sm">搜索</button>
</div>
<?php echo Html::endForm();?>
<br/>
<!-- <script src="/assets/laydate/laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
  elem: '#month',//指定元素
  type:'month' 
  ,btns: ['confirm']
});
</script> -->
<div id="main" style="width: 95%;height:500px;"></div>
	<script type="text/javascript">
		var month = <?php echo json_encode($month);?>;
		var count = <?php echo json_encode($count);?>;
		var average = <?php echo json_encode($average);?>;
		function pageInit(){
			var myChart = echarts.init(document.getElementById('main'),'macarons');
			var legend = [];
			myChart.setOption(getChartsStatusOption());
		}

		function getChartsStatusOption(){
			return {
				title: {
				text: '数据平均用量',
				subtext: '单位：千张/GB'
    		},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['本月卡使用数量', '平均用量']
			},
			toolbox: {
				show: true,
				feature: {
					dataView: {show: true, readOnly: false},
					magicType: {show: true, type: ['line', 'bar']},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			calculable: true,
			xAxis: [
				{
					type: 'category',
					data: month
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					name: '本月卡使用数量',
					type: 'bar',
					data: count,
					markPoint: {
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					}
				},
				{
					name: '平均用量',
					type: 'bar',
					data: average,
					markPoint: {
						data: [
							{type: 'max', name: '最大值'},
							{type: 'min', name: '最小值'}
						]
					}
				}
			]
			}
		}
	</script>	
